<!-- 注册 -->
<template>
    <div class="register">
        <div class="navbar themeBg">注册</div>
        <div class="main">
            <div class="cont">
                <div class="item">
                    <van-field v-model="phone" label="手机号" type="tel" @update:model-value="phoneChange" placeholder="请输入您的手机号" clearable>
                    </van-field>
                </div>
                <div class="codeWrap item marginBtm15">
                    <div class="">
                        <van-field v-model="authCode" label="验证码" maxlength="6" type="number" placeholder="请输入验证码" clearable>
                        </van-field>
                    </div>
                    <div class="codeWrapRight" @click="getCode">
                        {{num == 60 ? '获取验证码' : `${num}后获取`}}
                    </div>
                </div>
                <div class="item marginBtm15">
                    <van-field v-model="password" label="密码" :type="showPassword ? 'text' : 'password'" placeholder="6-16位由字母、数字组合的登录密码" clearable>
                        <template #right-icon>
                            <van-icon v-if="showPassword" name="eye-o" @click="setShowPassword"/>
                            <van-icon v-else name="closed-eye" @click="setShowPassword"/>
                        </template>
                    </van-field>
                </div>
                <div class="item marginBtm15">
                    <van-field v-model="parentUserPhoneValue" disabled label="邀请人" placeholder="请输入邀请人手机号" clearable>
                    </van-field>
                </div>
            </div>
        </div>
        <div class="submit">
            <van-button :disabled="userExist" type="primary" round block @click="registe">注册</van-button>
        </div>
                <div @click="goDownload" class="goDownload">老用户，下载APP</div>
            <div class="pull">
                <div class="pullLeft">
                    我已阅读并同意<span class="themeColor" @click.stop="goProtocolRge">《{{brandName}}服务协议》</span>
                </div>
            </div>
    </div>
</template>

<script>
import { ref, reactive , getCurrentInstance, toRefs, onUnmounted } from 'vue';
import { Field , Icon , Button , Checkbox , NavBar } from 'vant';
import storage from 'store';
import { ACCESS_TOKEN , BRANDID } from '@/utils/types';
import { validPsw } from '@/utils';
export default {
    components:{
        [Field.name]:Field,
        [Icon.name]:Icon,
        [Button.name]:Button,
        [Checkbox.name]:Checkbox,
        [NavBar.name]:NavBar,
    },
    setup() {
        storage.clearAll();
        const { proxy } = getCurrentInstance();
        const phone = ref('');  // 手机号
        const authCode = ref(''); // 验证码
        const password = ref(''); // 登录密码
        const showPassword = ref(false)
        const repPassword = ref(''); // 确认登录密码
        const showRepPassword = ref(false)
        const payPassword = ref('')
        const showPayPassword = ref(false)
        const parentUserPhone = ref(proxy.getHashParam('phone')) // 推荐人手机号
        const parentUserPhoneValue = ref('');
        if(parentUserPhone.value != ''){
            parentUserPhoneValue.value = proxy.hidePhone(parentUserPhone.value)
        }
        const brandId = proxy.getHashParam('brandId')
        const checked = ref(true); // 协议勾选状态
        const userExist = ref(false); // 用户是否注册
        const getCodeLoading = ref(false);
        const num = ref(60)
        const timer = ref(null)
        // 获取系统的token
        function getToken(){
            proxy.$http.brandApi.getToken(brandId)
            .then(res=>{
                if(res.success){
                    storage.set(ACCESS_TOKEN,res[ACCESS_TOKEN], res.expires_in)
                }
            })
        }
        getToken()
        // 获取验证码
        function getCode () {
            console.log(phone.value)
            if(getCodeLoading.value == true){
                return;
            }
            if(phone.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入手机号'})
                return
            }
            if(phone.value.length != 11){
                proxy.$toast({position: 'bottom',message:'请输入正确的手机号'})
                return
            }
            getCodeLoading.value = true
            num.value--;
            timer.value = setInterval(()=>{
                num.value--;
                console.log(num.value,'num')
                if(num.value == 0){
                    getCodeLoading.value = false
                    clearInterval(timer.value)
                    num.value = 60;
                }
            },1000)
            proxy.$http.loginApi.getCode(phone.value)
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    proxy.$toast({position: 'bottom',message:'验证码获取成功'})
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        // 注册
        function registe () {
            if(phone.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入手机号'})
                return
            }
            if(phone.value.length != 11){
                proxy.$toast({position: 'bottom',message:'请输入正确的手机号'})
                return
            }
            if(authCode.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入验证码'})
                return
            }
            if(password.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入登录密码'})
                return
            }
            if(password.value.length < 6 || password.value.length > 16 || !validPsw(password.value)){
                proxy.$toast({position: 'bottom',message:'登录密码由6-16位由字母、数字组合！'})
                return
            }
            if(payPassword.value == '123456'){
                proxy.$toast({position: 'bottom',message: '支付密码不能太过简单'})
                return;
            }
            proxy.$http.loginApi.register(phone.value,authCode.value,password.value,parentUserPhone.value)
            .then(res=>{
                if(res.success){
                    proxy.$toast({position: 'bottom',message:'注册成功，正在跳转下载页面！'})
                    userExist.value = true
                    setTimeout(()=>{
                        goDownload()
                    },1000)
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        function setShowPassword(){
            console.log(showPassword)
            showPassword.value = !showPassword.value
        }
        function setRepShowPassword(){
            showRepPassword.value = !showRepPassword.value
        }
        function setPayShowPassword(){
            showPayPassword.value = !showPayPassword.value
        }
        // 跳转下载页面
        function goDownload(){
            if(userExist.value){
                storage.set(BRANDID , brandId)
                proxy.$router.push({name: 'download',params:{'brandId':brandId}})
            }else{
                if(phone.value == ''){
                    proxy.$toast({message:'请输入手机号!',position: 'bottom'})
                }else{
                    proxy.$toast({message:'当前手机号还未注册，请先注册!',position: 'bottom'})
                }
            }
        }
        // 判断用户是否注册
        function phoneChange(val){
            console.log(val)
            if(val.length == 11){
                proxy.$http.loginApi.userIsExist(val)
                .then(res=>{
                    if(res.success){
                        userExist.value = true
                        proxy.$toast({message:'当前手机号已注册，请点击下载app，直接前往下载页面!',position: 'bottom'})
                    }else{
                        userExist.value = false
                    }
                })
            }
        }
        // 跳转注册协议
        function goProtocolRge(){
            proxy.$router.push({name: 'agreement'})
        }
        // 销毁的时候注销定时器
        onUnmounted(()=>{
            console.log('销毁定时器')
            if(timer.value){
                clearInterval(timer.value)
            }
        })
        return {
            phone,
            authCode,
            password,
            repPassword,
            parentUserPhone,
            checked,
            getCode,
            registe,
            showPassword,
            setShowPassword,
            showRepPassword,
            setRepShowPassword,
            goDownload,
            phoneChange,
            userExist,
            goProtocolRge,
            getCodeLoading,
            num,
            showPayPassword,
            payPassword,
            setPayShowPassword,
            parentUserPhoneValue,
        }
    }
}

</script>
<style scoped>
.navbar{
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #FFFFFF;
    font-size: 21px;
    font-weight: 500;
}
.main{
    margin: 15px 12px 50px;
    background: #FFFFFF;
    border-radius: 10px;
}
.item{
    height: 54px;
}
.item >>> .van-field{
    flex: 1;
    padding-left: 10px;
    max-height: 40px;
    background: none;
}
.item >>> .van-field__label{
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    width: 80px;
}
.codeWrap{
    display: flex;
    align-items: center;
}
.codeWrapRight{
    width: 95px;
    margin-left: 13px;
    flex-shrink: 0;
    border-left: 1px solid #E6E6E6;
    text-align: center;
    color: #6BA87C;
    font-size: 16px;
    /* margin-top: 33px; */
}
.goDownload{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0;
}
.submit{
    margin: 0 13px;
    display: flex;
}
.pull{
    margin-bottom: 30px;
    text-align: center;
    color: #B7B6B6;
    margin-top: 30px;
}
</style>